<script lang="ts" setup>
import { ref } from "vue";

const popupVisible = ref(false);
</script>

<template>
  <div class="shopping-cart">
    <div class="shopping-cart-button">
      <umi-icon name="gouwu" :size="24" @click="popupVisible = true"></umi-icon>
    </div>
    <umi-popup title="我的折扣商品" v-model:visible="popupVisible" width="80%">
      <umi-container :gap="16">
        <umi-media v-for="_ in 2">
          <umi-container justify="between" :gap="10" height="100%">
            <umi-space direction="vertical" :size="4">
              <umi-text :size="14" :line-height="20" bold>COTX茶月山 | 【超解渴】茉莉绿香柠茶单杯&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;x1</umi-text>
              <umi-text :size="12" color="#333">领券时间：2025-10-13 22:00</umi-text>
              <umi-text :size="12" color="#333">失效时间：2025-10-13 22:00</umi-text>
            </umi-space>
            <umi-container direction="horizonal" justify="between" align="center">
              <umi-text>￥7.9</umi-text>
              <umi-text color="#ff0000">核销码：613445</umi-text>
            </umi-container>
          </umi-container>
        </umi-media>
      </umi-container>
    </umi-popup>
  </div>
</template>

<style lang="scss" scoped>
.shopping-cart {
  &-button {
    position: fixed;
    right: 10px;
    bottom: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    box-shadow: 0 5px 5px #f2f2f2;
    cursor: pointer;
  }
}
</style>
